<template>
  <div>
    <SelectPropertyWarehouse ref="openSelectPropertyWarehouse" @propertyWarehouseSelected="propertyWarehouseSelected"></SelectPropertyWarehouse>
    <!-- 选择旧货权人 -->
    <el-dialog title="信息" :visible.sync="openSelectOProperty" width="1000px" append-to-body :destroy-on-close="true" :before-close="beforeClose">
      <el-form ref="form" @submit.native.prevent :model="formQuery" label-width="100px" :inline="true" v-show="showSearch">
        <el-form-item label="客户" prop="khmc">
          <el-select
            v-model="formQuery.khmc"
            placeholder="请选择客户"
            clearable
            filterable
            @keyup.enter.native="enterClick"
            :loading="selectClientLoading"
          >
            <el-option
                v-for="(item, index) in selectClientList"
                :key="index"
                :label="item.khmc"
                :value="item.khmc"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="仓库" prop="spckmc">
          <el-select
            v-model="formQuery.spckid"
            placeholder="请选择仓库"
            clearable
            filterable
            @keyup.enter.native="enterClick"
            :loading="selectWarehouse3Loading"
            @change="warehouseChange"
          >
            <el-option
                v-for="item in selectWarehouse3List"
                :key="item.spckid"
                :label="item.spckmc"
                :value="item.spckid"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">搜 索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="customerList"
      >
        <af-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100" fixed="left">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                @click="handleSelect(scope.row)"
            >选择仓库</el-button>
            </template>
        </af-table-column>
        <af-table-column label="客户" prop="spkhmc"  fixed="left"/>
        <af-table-column label="剩余件数" prop="spjs" />
        <af-table-column label="剩余重量(吨)" prop="spsl" />
        <af-table-column label="锁仓线" prop="scx" />
        <af-table-column label="担保提示金额" prop="tsje" />
        <af-table-column label="货物担保总金额" prop="hwje" />
      </el-table>
       <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>

</template>

<script>
import { warehousePropertyOSelect } from '@/api/storage/commonGoods/warehouseProperty'
import { selectClient } from "@/api/storage/commonGoods/warehouseMove";
import { selectWarehouse3 } from "@/api/storage/warehouse";
import SelectPropertyWarehouse from './selectPropertyWarehouse.vue'

export default {
  name: "WarehouseMoveSelectOProperty",
  components: { SelectPropertyWarehouse },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      //加载列表
      loading: true,
      //仓库加载
      selectWarehouse3Loading: true,
      //仓位加载
      selectClientLoading: true,
      //弹窗状态
      openSelectOProperty: false,
      // 查询参数
      formQuery: {
        khmcid1: "",
        khmc: "",
        spckid: ""
      },
      //新货权人，旧货权人列表数据去除新货权人数据
      khmc:"",
      //货权转移数据
      warehouseOutData:{},
      //行数据
      customerList: [],
      //客户列表
      selectClientList: [],
      //仓库列表
      selectWarehouse3List:[],
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
    };
  },
  methods: {
    /**获取仓库信息 */
    getList() {
      this.loading=true
      warehousePropertyOSelect(this.formQuery, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
        const data = response.rows
        for(let i in data) {
          if(data[i].spkhmc == this.khmc) {
            data.splice(i,1)
          }
        }
        this.customerList = data
        this.total = response.total
        this.loading=false
      });
    },
    /**获取客户 */
    clientSelect() {
      this.selectClientLoading = true
       selectClient({}).then(response => {
        this.selectClientList = response.data;
        this.selectClientLoading = false
      });
    },
    /**获取仓库 */
    warehouse3select() {
      this.selectWarehouse3Loading = true
       selectWarehouse3({}).then(response => {
        this.selectWarehouse3List = response.data;
        this.selectWarehouse3Loading = false
      });
    },
    /**仓库搜索 */
    handleQuery() {
        this.getList()
    },
    /**选择库存改变 */
    warehouseChange(id) {
      const data = this.selectWarehouse3List
      for(let i in data) {
        if(data[i].spckid == id) {
          this.formQuery.spckmc = data[i].spckmc
        }
      }
    },
    /** 选择库存*/
    handleSelect(row) {
      this.warehouseOutData = row
      this.warehouseOutData.inp = []
      this.$refs.openSelectPropertyWarehouse.open(this.warehouseOutData.inp,row.spkhmcid, this.formQuery.spckmc)
    },
    /**选择库存返回 */
    propertyWarehouseSelected(selection) {
      this.warehouseOutData.inp = selection
      this.$emit('propertyOSelected', this.warehouseOutData)
      this.close()
    },
      /**enter键触发 */
    enterClick(e) {
      this.getList()
    },
    /**改变窗口状态 */
    changeSelectOProperty() {
      this.openSelectOProperty = !this.openSelectOProperty;
    },
    /**关闭弹窗 */
    beforeClose(done) {
      this.close()
      this.reset()
      done()
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
    /**关闭弹窗 */
    close() {
      this.changeSelectOProperty()
    },
    /**打开弹窗 */
    open(data) {
      this.khmc = data
      this.changeSelectOProperty()
      this.getList()
      this.clientSelect()
      this.warehouse3select()
    }
  }
};
</script>
